<template>
  <div class="editTenantName">
    <pb-popup v-model="isVisible" :title="'供应单位编辑'" Width="1306" :showFoot="true">
      <div class="editTenantbox m-b8">
        <div>
          <div>
            已选供应单位
          </div>
          <!-- <div class="flex-container">
            <div v-for="(itme, index) in selectKitchenList" :key="index" class="kitchenbox">
              {{ itme.tenantName }}
            </div>
          </div> -->
          <div class="flex-container">
            <div v-for="(selectedItem, index) in selectKitchenList" :key="index" class="kitchenbox"
              :class="{ hover: selectedItem.isHovered }" @mouseenter="handleSelectedMouseEnter(selectedItem)"
              @mouseleave="handleSelectedMouseLeave(selectedItem)">
              {{ selectedItem.tenantName }}
              <span v-if="selectedItem.isHovered" class="close-icon" @click="handleRemoveSelected(selectedItem)">
                ×
              </span>
            </div>
          </div>
        </div>
        <div>
          <div>
            可选供应单位
          </div>
          <div>
            <pb-check :list="classList" @change="handleSelectAll"></pb-check>
          </div>
          <div class="flex-container">
            <div v-for="(item, index) in KitchenList" :key="index" class="kitchenbox" :class="{
              disabled: item.isSelected,
              hover: item.isHovered && !item.isSelected
            }" @click="handleSelectKitchen(item)" @mouseenter="!item.isSelected && handleMouseEnter(item)"
              @mouseleave="handleMouseLeave(item)" :style="{ cursor: item.isSelected ? 'not-allowed' : 'pointer' }">
              {{ item.tenantName }}
            </div>
          </div>
        </div>
      </div>
      <template #footer></template>
    </pb-popup>
  </div>
</template>
<script setup lang="ts">
import { GetkitchenListApi } from '@/api/Purchasing'
const emit = defineEmits(['updatatenant'])
const classList = ref([
  { label: '全部', val: null, checked: false },
])
// const changeCheck = (eve: any) => {
//   // console.log(eve, '22')
//   eve.checked = !eve.checked
//   handleSelectAll()
// }
const isVisible = ref(false)
const selectKitchenList = ref([] as any)
const KitchenList = ref([] as any)
const isAllSelected = ref(false);
const handleSelectAll = () => {
  // console.log('222', '2321321')
  if (isAllSelected.value) {
    // 取消全选
    selectKitchenList.value = [];
    KitchenList.value.forEach(item => {
      item.isSelected = false;
      item.isHovered = false;
    });
  } else {
    // 全选
    selectKitchenList.value = KitchenList.value.map(item => ({ ...item, isHovered: false }));
    KitchenList.value.forEach(item => {
      item.isSelected = true;
      item.isHovered = false;
    });
  }
  // 切换全选状态
  isAllSelected.value = !isAllSelected.value;
  classList.value[0].checked = isAllSelected.value;
  updateCombinedDataAndEmit();
};
const handleSelectKitchen = (item: any) => {
  if (!item.isSelected) {
    // 将选中的元素添加到已选列表
    selectKitchenList.value.push(item);
    // 标记该元素为已选中
    item.isSelected = true;
    // 重置右边被选中元素的 isHovered 状态
    item.isHovered = false;
    updateCombinedDataAndEmit();
  }
}
const handleMouseEnter = (item: any) => {
  item.isHovered = true;
};

const handleMouseLeave = (item: any) => {
  item.isHovered = false;
};

const handleSelectedMouseEnter = (item: any) => {
  item.isHovered = true;
};

const handleSelectedMouseLeave = (item: any) => {
  item.isHovered = false;
};

const handleRemoveSelected = (item: any) => {
  selectKitchenList.value = selectKitchenList.value.filter(
    (selected: any) => selected.tenantId !== item.tenantId
  );
  const originalItem = KitchenList.value.find(
    (kitchen: any) => kitchen.tenantId === item.tenantId
  );
  if (originalItem) {
    originalItem.isSelected = false;
    // 新增：重置 isHovered 属性
    originalItem.isHovered = false;
  }
  updateCombinedDataAndEmit();
};
const show = (list: any) => {
  KitchenList.value = []
  selectKitchenList.value = []
  GetkitchenListApi().then(res => {
    KitchenList.value = res.data
    list.forEach((tenantId: any) => {
      const item = KitchenList.value.find(item => item.tenantId === tenantId);
      if (item) {
        selectKitchenList.value.push({ ...item, isHovered: false });
        item.isSelected = true;
      }
    });
    // console.log(list.length, KitchenList.value.length, list.length === KitchenList.value.length, '2')
    isAllSelected.value = list.length === KitchenList.value.length;
    classList.value[0].checked = isAllSelected.value;
  })
  isVisible.value = true
}
const updateCombinedDataAndEmit = () => {
  const names = selectKitchenList.value.map(item => item.tenantName);
  const combinedTenantNames = names.length > 1 ? names.join(',') : names[0] || '';
  const combinedTenantIds = selectKitchenList.value.map(item => item.tenantId);
  // 触发自定义事件并传递数据
  emit('updatatenant', combinedTenantNames, combinedTenantIds);
};
defineExpose({
  show
})
</script>
<style lang="scss" scoped>
.editTenantbox {
  display: flex;

  >div {
    width: 50%;

    .flex-container {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
    }

    .kitchenbox {
      padding: 4px 8px;
      background: #FFFFFF;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      margin: 0 8px 8px 0;
      cursor: pointer;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }

    .kitchenbox.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .kitchenbox.hover {
      color: rgba(13, 150, 139, 1);
      border-color: rgba(13, 150, 139, 1);
    }

  }
}
</style>
